<template>
  <div class="edit_container" style="background:#fff">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>
<script>
//中文文档  https://www.kancloud.cn/liuwave/quill/1434140
// https://www.freesion.com/article/1488483705/
// npm install vue-quill-editor --save
// npm install quill --save
// https://www.cnblogs.com/grootbaby/p/13827898.html
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: ``,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块

            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向

            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式

            ["clean"], //清除字体样式
            ["image", "video"] //上传图片、上传视频
          ]
        },
        placeholder:"请输入内容..."
      }
    };
  },
  mounted(){
    this.content = `14款前端常用的富文本编辑器插件
1、wangEditor

网址：http://www.wangeditor.com/

基于JavaScript和css开发的 Web富文本编辑器， 轻量、简洁、界面美观、易用、开源免费。

2、TinyMCE

网址：https://www.tiny.cloud/docs/demo/full-featured/

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。

功能齐全，界面美观，就是文档是英文的，对开发人员英文水平有一定要求。

3、百度ueditor

网址：https://github.com/fex-team/ueditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，功能齐全，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码，缺点是已经没有更新了。

4、kindeditor

网址：http://kindeditor.net/demo.php

KindEditor 是一套开源的在线html编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、php、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

5、Textbox

网址：https://www.textbox.io/

Textbox是一款极简但功能强大的在线文本编辑器，支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。

此外，该工具还实现了屏幕阅读器等辅助技术，并符合WAI-ARIA可访问性标准。

6、CKEditor

网址：https://ckeditor.com/ckeditor-5/demo/

CKEditor官方版是一款专业专业的在线文字编辑器，软件支持各种不同的浏览器，可以让用户们轻松在线编辑，CKEditor5官方版软件体积非常小巧，使用起来也十分方便快捷，还能与不同的编程语言相结合，是大家编辑网页代码的必备工具。

7、quill

网址：https://quilljs.com/

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。

开源免费，项目活跃，一直有人维护。

8、simditor

网址：https://simditor.tower.im/

simditor是Tower平台使用的富文本编辑器，是一款轻量化的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。

虽然是国内出品，但文档是英文的。开源免费。

9、summernote

网址：https://summernote.org/

summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。

summernote开源免费，该项目一直比较活跃，一直都有人在维护。summernote同样依赖于jquery和bootstrap，使用前先引入这两项。

10、jodit

网址：https://xdsoft.net/jodit/

Jodit是一款使用纯TypeScript编写的（无需使用其他库），美观实用的所见即所得（WYSIWYG）开源富文本编辑器，支持中文，超强自定义。

11、Editor.md

网址：https://pandao.github.io/editor.md/

功能非常丰富的编辑器，左端编辑，右端预览，非常方便，完全免费。

12、froala Editor

网址：https://www.froala.com/wysiwyg-editor

界面非常好看，功能非常强大，非常好用（非免费，可破解）

13、eWebEditor

网址：http://www.ewebeditor.net/

eWebEditor外观和使用风格都和微软 Word很类似，功能很多。工具条可以定制，运行速度很快。

导入文件接口很多，支持word、excel、pdf、ppt直接导入，目前版本不支持代码高亮，不适合纯技术平台使用，适合内容编辑人员使用。

eWebEditor有很长的历史了，是典型的传统富文本编辑器，不论是界面，还是功能都比较传统。eWebEditor是收费的，但也有免费的精简版，精简版没有后台功能。

14、dhtmlxEditor

网址：https://dhtmlx.com/docs/products/dhtmlxRichText/

DHTMLX组件是一整套基于js的UI库，功能强大，其中包含编辑器dhtmlxEditor。

该编辑器可以直接集成到Angular，react和vue.js框架中，该编辑器还同时支持Markdown和富文本。

支持普通视图和类似word一样的页面视图，支持全屏幕，工具支持自定义，包括工具条颜色和样式等。

dhtmlxEditor分为免费版和收费版，免费版具有绝大多数功能，而且免费版是开源的你可以在代码级别随便扩充。`
  },
  methods: {
    onEditorReady() {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {} // 内容改变事件
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>
